<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <script src="{% static '/jquery.min.js' %}"></script>
    <script>
        $(function () {
            var error_pw=false;
            var error_pw1=false;
            var error_pw2=false;
            var error_pw3=false;
            $('#npw1').blur(function () {
                checkpw1();
                checkpw2();
                checkopw();
            });
             $('#npw2').blur(function () {
                {#checkpw2();#}
                {#checkpw1();#}
                checkpw2();
                {#checkopw();#}

            });
             $('#opw').blur(function () {
                {#checkopw();#}
                 checkpw1();
                {#checkpw2();#}
                checkopw();

            });
            function checkpw1() {
                var len=$('#opw').val().length;
                var len1=$('#npw1').val().length;
                var len2=$('#npw2').val().length;
                    if(len1<6||len1>20){
                        if(len1 == 0){
                            $('#npw1').parent().next().hide();
                            $('#npw2').parent().next().hide();
                            $('#opw').parent().next().hide();
                            error_pw=true;
                        }else{
                            error_pw1=true;
                            $('#npw1').parent().next().html('密码长度为6-20').show();
                            error_pw=false;
                        }
                    }
                    else{
                            error_pw1=false;
                            $('#npw1').parent().next().hide()
                    }
            }
            function checkpw2() {
                    var len=$('#opw').val().length;
                    var len1=$('#npw1').val().length;
                    var len2=$('#npw2').val().length;
                    if(len2==0 || len1==0){
                        $('#npw2').parent().next().hide();
                        error_pw=true;
                    }else {
                        error_pw=false;
                        if($('#npw1').val()!=$('#npw2').val()){

                            error_pw2=true;
                            $('#npw2').parent().next().html('密码前后不一致').show();

                        }else{
                            error_pw2=false;
                            $('#npw2').parent().next().hide()
                        }
                    }
            }
            function checkopw() {
                    var len=$('#opw').val().length;
                    if(len==0){
                         $('#npw1').parent().next().hide()
                        error_pw=true;

                    }else{
                        error_pw=false;
                       if($('#npw1').val()==$('#opw').val()){
                            error_pw3=true;
                            $('#npw1').parent().next().html('不能与原密码相同').show();
                       }else {
                            error_pw3=false;
                            $('#opw').parent().next().hide()
                       }
                    }
            }
            $('#sbt').click(function () {
                var len=$('#opw').val().length;
                var len1=$('#npw1').val().length;
                var len2=$('#npw2').val().length;

                checkpw1();
                checkopw();
                checkpw2();
                if (error_pw1==false && error_pw2==false && error_pw3==false && error_pw==false){
                    $.post('/info_ajax/',{'opw':$('#opw').val(),'npw1':$('#npw1').val()}, function (data) {
                            if(data.tip==1){
                                if(confirm('修改成功')){
                                    window.location.href='/';
                                }

                            }else{
                                if(data.tip==0){
                                    alert('原密码错误')
                                }else {
                                    alert('系统异常请稍后再试！')
                                }

                            }
                    });
                }

            })

        })
    </script>
    <style>
        body{
            margin:0;
        }
        #nav{
            width: 100%;
            height: 40px;
            background-color: white;
            border:gray solid ;
            position: fixed;
            top: 0;
            z-index: 1000;
        }
        #nb{
                    width: 1200px;
                    height: 40px;
                    /*border: red solid;*/
                    margin:0 auto;
                    position: relative;
                    /*left:180px;*/
                }
        #logo{
            width: 80px;
            height: 40px;
            position: absolute;
            left:20px;
        }
        #logo>img{
            width: 80px;
            height: 40px;
        }
        #link>ul{
            margin:0 ;
            padding-left: 0;
            position: absolute;
            right: 20px;
        }
        li{
            float: left;
            list-style: none;
            line-height: 40px;
            margin-left: 120px;
        }
        li>a{
            text-decoration: none;
            font-family: "Microsoft Himalaya";
            color: black;
        }
        section{
            width: 80%;
            height: 600px;
            border: gray solid;
            {#background-color: white;#}
            background-size: 1440px 600px;
            background-image: url("{% static 'menu1.jpg' %}");
            position: relative;

            margin: 80px auto;
        }
        section>p{
            text-align:left;
            color: black;
        }
        p{
            text-align: center;
            color: darkgrey;
        }
        #fm>table{
            position: absolute;
            left: 420px;
            top: 80px;
        }
        th{
            text-align: left;
        }
    </style>
    
    
</head>
<body>
    <span id="top"></span>
    <div id="nav">
        <div id="nb">
            <div id="logo">
                <img src="{% static 'logo1.jpg' %}" alt="">
            </div>
            <div id="link">
                {% if flag %}
                <ul>
                    <li><a href="/teaIndex">首页</a></li>
                   <li><a href="#top">大学课程教学过程管理系统</a></li>

                   <li><a href="#" style="color: #b113e2;font-size:20pt">{{ userid }}</a></li>
                   <li><a href="/">退出</a></li>

                   <li><a href="http://www.baidu.com" target="_blank" >关于</a></li>
                </ul>
                {% else %}
                    <ul>
                    <li><a href="/stuIndex">首页</a></li>
                   <li><a href="#top">大学课程教学过程管理系统</a></li>

                   <li><a href="#" style="color: #b113e2;font-size:20pt">{{ userid }}</a></li>
                   <li><a href="/">退出</a></li>

                   <li><a href="http://www.baidu.com" target="_blank" >关于</a></li>
                </ul>
                {% endif %}

            </div>
        </div>
    </div>
    <section>
        <h3 align="center" style="background: #cccccc">个人中心</h3>
        <form method = 'post' enctype="multipart/form-data" id="fm">
            {% csrf_token %}
            <table cellpadding="8">
                <tr>
                    <th>用户ID</th>
                    <td>{{ userid }}</td>
                </tr>
                <tr>
                    <th>姓名</th>
                    <td>{{ name }}</td>
                </tr>
                 <tr>
                    <th>Email</th>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <th>输入当前密码</th>
                    <td><input type="password" id="opw" ></td>
                    <td class="error" style="color: red"></td>
                </tr>
                <tr>
                    <th>输入新密码</th>
                    <td><input type="password" id="npw1" ></td>
                    <td class="error" style="color: red"></td>
                </tr>
                <tr>
                    <th>确认新密码</th>
                    <td><input type="password" id="npw2" ></td>
                    <td class="error" style="color: red"></td>
                </tr>
                <tr><th colspan="2"><input id="sbt" type="button" value="提交" style="width:
                280px"></th></tr>
            </table>

        </form>
        

    </section>
    <hr>
    <p id="bottom">&#9762;&#9762; Author &#8620; SunChao cc &#9762;&#9762;</p>
</body>
</html>